import React, { Component } from "react";
import "./index.css";

export default class ColorPicker extends Component {
  //声明状态
  state = {
    r: 0,
    g: 0,
    b: 0,
  };
  render() {
    //解构赋值
    let { r, g, b } = this.state;

    return (
      <div className="color-container">
        <div className="picker">
          <div className="show" style={{background: `rgb(${r},${g},${b})`}}></div>
          <hr />
          <div className="control">
            R <input type="range" value={r} onChange={this.change("r")}  min='0' max="255"   /> <span>{r}</span> <br></br>
            G <input type="range" value={g} onChange={this.change("g")}  min='0' max="255"   /> <span>{g}</span><br></br>
            B <input type="range" value={b} onChange={this.change("b")}  min='0' max="255"   /> <span>{b}</span><br></br>
          </div>
        </div>
      </div>
    );
  }

  //声明函数 事件回调
  change = (type) => {
    //返回一个新的函数
    return (e) => {
      this.setState({
        [type]: e.target.value,
      });
    };
  };
}
